<template>
  <div class='vdrcontainer'>
    <vdr
        :w="200"
        :h="100"
        :debug="false"
        :min-width="20"
        :min-height="20"
        :isConflictCheck="false"
        :snap="true"
        :snapTolerance="10"
        :scaleRatio="1"
        :x="100"
        :y="100"
        class="vdrclass"
      >
        <div
          style="
            background-color: white;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          "
        >
          <div
            style="height: 30px; background-color: #555; cursor: move"
            id="dragpannel"
          >
            <span style="position: absolute; left: 5px; top: 5px">
              图层管理
            </span>
            <i
              class="el-icon-close"
              style="cursor: pointer; position: absolute; right: 7px; top: 7px"
              @click="$parent.iftuceng = false"
            ></i>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <span> 底图： </span>

            <el-select
              v-model="selditu"
              placeholder="请选择"
              @change="lujingchange()"
            >
              <el-option
                v-for="item in dituoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </vdr>
  </div>
</template>
<script>

import guangzhui from "./guangzhuimixins";
import vdr from "@/views/peizhihua/components/vdr/src";

export default {
  name: "tucengcom",
  components: { vdr },

  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  
  mixins: [guangzhui],
  data() {
    return {
      dituoptions: [],
      selditu: "",
      ditukv: {}
    };
  },
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    this.loaddata()
  },
  methods: {
    lujingchange() {
      _.forIn(this.ditukv, (v, k) =>{
        if (k == this.selditu) {
          this.ditukv[k].enabled = true
        }else{
          this.ditukv[k].enabled = false
        
        }
      })
    },

    loaddata() {
      if (_.has(this.$root._earth, "sceneTree")) {
        this.$root._earth.sceneTree.root.children.map((item) => {
          if (item.czmObject.xbsjType == "Imagery") {
            console.log(item.czmObject.name);
            this.dituoptions.push({
              label: item.czmObject.name,
              value: item.ref,
            });
            this.ditukv[item.ref] =
              this.$root._earth.sceneTree.$refs[item.ref].czmObject;
          }
        });

        this.selditu = this.dituoptions[0].value;

        // this.bindval();
      } else {
        setTimeout(() => {
          this.loaddata();
        }, 100);
      }
    },
    bindval() {
      //解绑

    },
  },
}
</script>
<style lang='scss' scoped>

.vdrcontainer {
  width: calc(100vw);
  height: calc(100vh);
  position: fixed;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.vdrclass {
  pointer-events: auto;
  cursor: pointer;
}

</style>